<template>
  <div class="wechatList">
    <el-row>
      <el-col :span="8"><el-input v-model="wd" placeholder="根据微信号、公众号名称、公司名称搜索" @keyup.enter.native="submitSearch"></el-input></el-col>
      <el-col :span="3" style="margin-left:10px"><el-button type="primary" @click="submitSearch">搜索</el-button></el-col>
    </el-row>
    <el-row>
      <div class="field-tit">公众号类型:</div>
      <div class="field-bd">
        <el-select v-model="accountType" placeholder="不限" clearable>
          <el-option :value="0" label="订阅号"></el-option>
          <el-option :value="1" label="旧账号升级订阅号"></el-option>
          <el-option :value="2" label="服务号"></el-option>
        </el-select>
      </div>
    </el-row>
    <el-row>
      <a v-if="wechatAuth" :href="wechatAuth"><el-button type="primary">授权新公众号</el-button></a>
      <a v-else><el-button type="primary">授权新公众号</el-button></a>
    </el-row>
    <el-table v-loading="tbLoading" element-loading-text="拼命加载中" :data="wechatList.list" stripe class="table">
      <el-table-column prop="alias" label="微信号" className="is-center">
      </el-table-column>
      <el-table-column label="logo" className="is-center">
        <template slot-scope="scope">
          <div class="img-wrap">
            <img class="wechatImg" :src="scope.row.headImg" alt="" key="head">
            <img class="wechatQR" :src="scope.row.qrcodeUrl" key="qr">
          </div>
        </template>
      </el-table-column>
      <el-table-column label="公众号信息">
        <template slot-scope="scope">
          <div class="nickName">{{scope.row.nickName}}<i class="num">(1000)</i></div>
          <div class="company">{{scope.row.principalName}}</div>
        </template>
      </el-table-column>
      <el-table-column label="联系方式" className="is-center">
        <template slot-scope="scope">
          <div>{{scope.row.adminName}}</div>
          <div>{{scope.row.adminPhone}}</div>
        </template>
      </el-table-column>
      <el-table-column label="是否授权" className="is-center">
        <template slot-scope="scope">
          {{scope.row.authRes}}
        </template>
      </el-table-column>
      <el-table-column label="操作" className="is-center">
        <template slot-scope="scope">
          <el-button type="text" @click="$router.push({ name:'WechatManage', params:{appid: scope.row.appid, type: 'menu'} })">管理公众号</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        :current-page.sync="page"
        :page-size.sync="size"
        layout="total, prev, pager, next, jumper"
        :total="wechatList.page.total"
        @current-change="submitSearch()">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import {mapState, mapActions} from 'vuex'
  export default {
    data () {
      return {
        wd: '',
        accountType: '',
        tbLoading: true,
        page: 1,
        size: 10
      }
    },
    mounted () {
      this.initPageData()
    },
    computed: {
      ...mapState({
        wechatAuth: state => state.wechatManage.wechatAuthUrl,
        wechatList: state => state.wechatManage.wechatList
      })
    },
    methods: {
      ...mapActions(['getWechatAuthUrl', 'getWechatList', 'getWechatIsAuth']),
      // 初始化页面数据
      initPageData () {
        this.submitSearch()
        this.getWechatAuthUrl(location.origin + '/admin/cont/weMedia/authSuccess')
      },
      // 搜索
      submitSearch () {
        this.tbLoading = true
        this.getWechatList({
          wd: this.wd,
          accountType: this.accountType
        }).then(res => {
          this.tbLoading = false
        })
      }
    }
  }
</script>
<style lang="scss">
  .wechatList{
    .el-row{margin-bottom:15px}
    .el-table{
      .img-wrap{position:relative;margin: 10px auto;width:85px;height:85px;}
      .img-wrap img{position:absolute;left:0;top:0;width:85px;vertical-align:top}
      .wechatQR{opacity:0;transition:opacity .5s;}
      .img-wrap:hover .wechatQR{opacity:1;}
      .nickName{font-size:14px;font-weight:700;}
      .nickName i{font-weight:500;color:#999;font-size:12px;}
    }
  }
</style>
